<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description" content=""/>
    <script src="__PUBLIC__/view/js/constant.js"></script>
    <script src="__PUBLIC__/view/js/baidu_js_push.js"></script>
    <script src="__PUBLIC__/view/js/jquery-1.8.3.js"></script>
    <script src="__PUBLIC__/view/js/jquery.reveal.js"></script>
    <script src="__PUBLIC__/view/js/jquery.cookie.js"></script>
    <script src="__PUBLIC__/view/js/place.js"></script>
    <!-- template.js -->
    <script src="__PUBLIC__/view/js/template.js"></script>
    <script src="__PUBLIC__/admin/layer/layer.js"></script>
    <script src="__PUBLIC__/admin/js/dialog.js"></script>


    <link rel="stylesheet" href="__PUBLIC__/view/css/bootstrap.min.css" >
    <link rel="icon" href="__PUBLIC__/view/img/favicon.ico" type="image/x-icon"/>
    <link rel=stylesheet href="__PUBLIC__/view/css/reset.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/common.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/base.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/header.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shopcart.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/place.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/footer_1.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/reveal.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/login.css">

    <!--<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
    <!--<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <title>微云点菜系统</title>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?9bb651f2bb5622d49b0299560d6559cd";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!--template-->
    <script type="text/html" id="tableItemTemplate">
        <div class="name-item"><a class="place-link" href="shop.html">第 ${numberTable} 桌</a></div>
    </script>
</head>
<body onload="onloadCallback()">
<!--Vue.js-->
<div id="app">
    <!--header部分-->
    <div class="header shadow">
        <div class="search-result">
        </div>
        <div class="header-left fl">



            <div class="icon fl"></div>
            <a class="weixin-dingfan fw" href="#">微信订饭</a>
            <a class="logo" href="/"></a>

            <div class="search" style="display: none;">
                <img class="search-icon" src="__PUBLIC__/view/img/icon_search.png" width="20" height="20">
                <input id="search-input" class="search-input" type="text" placeholder="" onkeypress="onKeySearch()">
                <span id="search-del" class="search-del">&times;</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="header-right fr">
            <div class="login fl">

                    <span class="header-operater">
                    <a href="#" style="display: none;">外卖</a>
                    <a href="doing.html">厨师端</a>
                    <a href="#" style="display: none;">联系我们</a>
                    </span>
                <a id="header-login" class="navBtn f-radius f-select n" data-reveal-id="myModal" data-animation="fade">
                    登录
                </a>
            </div>
            <div id="x" class="cart fr hide">

            </div>
            <div id="user" class="user fr n">
                <img class="user-icon" src="__PUBLIC__/view/img/icon_my.png">
            </div>
        </div>
        <ul id="subnav" class="subnav subnav-shadow n">
            <li><a href="/account/setting" target="">账号设置</a></li>
            <li><a href="#" target="">我的订单</a></li>
            <li><a href="/account/balance" target="">我的余额</a></li>
            <li><a href="/account/score" target="">我的积分</a></li>
            <li><a href="/account/address" target="">我的地址</a></li>
            <li><a id="sub-logout" href="" target="">退出</a></li>
        </ul>
    </div>
    <!--内容部分-->
    <div class="place-content">

        <div class="place-wrap-1">
            <div class="place-cc">
                <span></span>
                <a></a>

            </div>
            <div class="place-wrap place-shadow">
                <div class="place-tab">

                    <div class="slide-box" >
                        <div class="slide-item" v-for="tableNum in selectedTable">

                            <li style="display: inline-block; ">
                                <a  v-on:click="cancelChoose" id="t1" class="alive" v-bind:value="tableNum">{{tableNum}}桌</a>
                            </li>
                        </div>
                    </div>

                </div>





                <div id="n1" class="place-names">
                    <!--内容-->
                    <!--<tr v-for="person in people">-->
                    <div v-for="item in tableData" class='name-item'>
                        <a v-if="(item.table_status==1)" v-on:click="notAvailableTable"   class='place-link' style='color: grey' isTableValid='1' href='#' v-bind:value="item.table_num">第{{item.table_num}}桌</a>
                        <a v-if="(item.table_status==0 && selectedTable.indexOf(item.table_num)!=-1)" v-on:click="notAvailableTable"   class='place-link' style='color: grey;' isTableValid='1' href='#' v-bind:value="item.table_num">第{{item.table_num}}桌</a>
                        <a v-if="(item.table_status==0 && selectedTable.indexOf(item.table_num)==-1)" v-on:click="availableTable" class='place-link' style='color: red'  isTableValid='0' href='#'      v-bind:value="item.table_num">第{{item.table_num}}桌</a>
                    </div>

                    <button v-if="(selectedTable.length>0)" v-on:click="submitOrderTable"  class="btn btn-info">已选择 {{selectedTable.length}} 桌</button>
                    <button v-if="(selectedTable.length==0)" class="btn btn-info no_active" disabled="disabled">未选择任何桌</button>
                </div>
            </div>
        </div>

        <div class="shop-cart shadow n">
            <div class="shop-head">
                购物车<a class="shop-clear">[清空]</a>
            </div>
            <div class="shop-body">


                <div class="isnull">
                    <span></span>
                    <b>购物车空空如也</b>
                </div>
            </div>
            <div class="shop-bottom">
                <div class="bottom-price fl">总计：￥<label>32</label>
                </div>
                <div class="bottom-icon"></div>
                <div class="bottom-pay fr">
                    <a id="cart-pay">结算</a>
                </div>
            </div>
        </div>

        <ul class="place-nav n">
            <li><a class="city">北京</a></li>
            <li><a class="city">天津</a></li>
        </ul>
    </div>

</div>


<!--提示框-->
<div id="alertModel" class="alertModel" style="display: none">
    <a id="alert" data-reveal-id="alertModel" data-animation="fade"></a>
    <span id="alert-msg"></span>
    <button id="btn-ok" class="btn">知道了</button>
    <a class="close-reveal-modal"><img src="__PUBLIC__/view/img/icon_close.png" height="24" width="24"></a>
</div>

<script src="__PUBLIC__/view/js/common.js"></script>
<script src="__PUBLIC__/view/js/md5.js"></script>
<script src="__PUBLIC__/view/js/myInfo.js"></script>
<script src="__PUBLIC__/view/js/login.js"></script>
<script src="__PUBLIC__/view/js/cart.lib.js"></script>
<script src="__PUBLIC__/view/js/cart.js"></script>
<script src="__PUBLIC__/view/js/header.js?v=1"></script>
<script src="__PUBLIC__/view/js/footer.js"></script>
<script type="text/javascript">


    $(function () {
        //初始化购物车
        initCart();
        //footer
        processFooter();
        //地址悬浮
        $(".place-cc a,.place-nav").hover(function () {
            $('.place-nav').show();
        }, function () {
            $('.place-nav').hide();
        });
        //购物车相关
        var shopCartWidth = $(".shop-cart").width();
        //默认隐藏购物车
        $(".shop-cart,.shop-bottom").css("right", -shopCartWidth);
        var mRight = -shopCartWidth;
        $("#cart").click(function () {
            $('.shop-cart').show();
            //适配购物车
            processShopItem();
            shopCartWidth = $(".shop-cart").width();
            if (mRight == '0px') {
                mRight = -shopCartWidth;
                $(".shop-cart,.shop-bottom").animate({right: mRight}, 200);
            }
            else {
                mRight = '0px';
                $(".shop-cart,.shop-bottom").animate({right: mRight}, 200);
            }
        });
        //中间高
        var zw = $(window).width();
        var middleWidth = $('.place-wrap').width();
        var middleHeight = $('.place-wrap').height();
        var marginLeft = (zw - middleWidth) / 2;
        $(".place-wrap-1").css("marginLeft", marginLeft);
        $(".place-wrap-1").show();
        //地址选择悬浮
        $(".place-nav").css("left", marginLeft + 32);//再加32
        //地址点击
        $('.city').click(function (event) {
            if ($(this).text() != "北京") {
                showAlert("该城市未开通");
            } else {
                window.location.reload();
            }
        });
        //弹出动画
        $(".place-wrap").animate({"opacity": "0.9"}, 200);

        $(window).resize(function () {
            //中间高
            var zw = $(window).width();
            var middleWidth = $('.place-wrap').width();
            var middleHeight = $('.place-wrap').height();
            var marginLeft = (zw - middleWidth) / 2;
            $(".place-wrap-1").css("marginLeft", marginLeft);
            //地址选择悬浮
            $(".place-nav").css("left", marginLeft + 32);

            //适配购物车
            processShopItem();

            $('.shop-cart').hide();
            var shopCartWidth = $(".shop-cart").width();
            //默认隐藏购物车
            $(".shop-cart,.shop-bottom").css("right", -shopCartWidth);
            mRight = -shopCartWidth;

            processFooter();
        });

        //tab点击事件
        $('.place-tab a').click(function () {
            //变样式
            var cl = $(this).parents('.place-tab').find('a');
            cl.removeClass('alive');
            $(this).addClass('alive');
            var pid = $(this).attr('id');
            $('.place-names').hide();
            var n = "#" + pid.replace('t', 'n');
            $(n).show();
        });
    });

    function processFooter() {
        var zh = $(document.body).height();
        $(".footer-content").css('top', zh - 60).show();             //TODO:
    }
</script>




<script>

    //就是$(window).resize()所调用的方法；
    var resizePage = function () {
        //window宽
        var zw = $(window).width();
        //window高
        var zh = $(window).height();
        if (zw >= 1000) {
            if (zw < 1240) {
            } else {
            }
            $(".name-item").css({"float": "left", "text-align": "left", "width": "280px"});
            $(".name-item a").css({"margin-left": "30px"});
            $(".place-names").css({"padding": "20px 50px"});
            $(".place-wrap-1").css({"width": "700px"});
            $(".place-wrap").css({"width": "700px", "margin-bottom": "0px"});
        }
        else if (zw < 1000) {
            if (zw < 660) {
            } else {
            }
            $(".name-item").css({"float": "none", "text-align": "center", "width": "100%"});
            $(".name-item a").css({"margin-left": "0px"});
            $(".place-names").css({"padding": "0px 0px"});
            $(".place-wrap-1").css({"width": "100%", "margin-left": "0px"});
            $(".place-wrap").css({"width": "100%", "margin-bottom": "100px"});
        }
    };


    window.onload = function () {
        console.log("onload");
        resizePage();
    };

    var onloadCallback = function () {

        resizePage();
    };

    $(function () {
        //监听窗口尺寸
        $(window).resize(resizePage);

        resizePage();
    });
    resizePage();

</script>

</body>

<style>
    a.place-link .red {
        color: red;
    }

    a.place-link .grey {
        color: grey;
    }
</style>

<!-- 包括所有已编译的插件 -->
<script src="__PUBLIC__/view/js/bootstrap.min.js"></script>
<!--导入vue.js-->
<script src="__PUBLIC__/view/js/vue.js"></script>
<!--axios-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->


<script>

    var pathShopPage = "{:U('Menu/shop')}";
    // 这是我们的Model
    var exampleData = {
        tableData: [],
        selectedTable: []
    };

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    var vue = new Vue({
        el: '#app',
        data: exampleData,
        mounted: function() {

            var shopId = SHOP_ID;
            console.log("shopId...........>>>>"+shopId);
            this.removeAllDishInCookies();
            this.reqData();
        },
        methods: {
            removeAllDishInCookies: function () {
                //TODO:清空缓存
            },
            reqData:function() {
                var reqTableCountPath = "{:U('Api/showTable')}";
                var index = layer.load();
                $.ajax({
                    type: "get",
                    url: reqTableCountPath,
                    data: {},
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code == 30011) {
                            if (!data.data || data.data.length == 0) {
                                alert("对不起该餐厅无桌可用");
                                return;
                            }
                            var rsData = data.data;
                            console.log(rsData.toString());
                            exampleData.tableData = rsData;
                            alert("获得桌号成功");
                            resizePage();
                        } else {
                            alert("桌数获取失败!");
                        }
                        layer.close(index);
                    },
                    error: function () {
                        alert("菜单获取失败!");
                        layer.close(index);
                    }
                });
            },
            notAvailableTable: function() {
                alert("当前桌号不可用");
            },
            availableTable: function(event) {
                var ele = event.currentTarget;
                var numberTable = $(ele).attr("value");
                if (exampleData.selectedTable.indexOf(numberTable) == -1)       //找不到该数字：数字不存在
                    exampleData.selectedTable.push(numberTable);
                console.log(exampleData.selectedTable);
            },
            cancelChoose: function (event) {
                var ele = event.currentTarget;
                var numberTable = $(ele).attr("value");
                if (exampleData.selectedTable.indexOf(numberTable) != -1)  {
                    var index = exampleData.selectedTable.indexOf(numberTable);
                    exampleData.selectedTable.splice(index, 1);
                }      //找不到该数字：数字不存在
            },
            submitOrderTable: function (event) {
                var shopId = SHOP_ID;
                var tableNums = exampleData.selectedTable.join(',');
                dialog.confirm("确认？", pathShopPage, function () {
                    if(shopId){
//                        console.log("明显有啊。。。。");
                        alert("shopId>>>>>_++++"+shopId);
//                        $.cookie('shopId' ,shopId,{expires:1,path:'/'});//写cookie
                        $.cookie('shopId' ,shopId);//写cookie
                        //写到cookies
                        $.cookie('table'+shopId, tableNums);//写cookie

                        return true;
                    } else {
                        alert("选择桌号失败：没有shopId");
                        return false;
                    }
                }, function () {
                    //成功
                    location.href=pathShopPage;
                }, function () {
                    //失败
//                    alert("对不起，选择桌号失败，请稍后再试");
                });

            }
        }
    });
</script>
</html>